<h1>Styling</h1>

<p>The tree comes with very basic style.</p>
<p>The following classes are available for customization:</p>

<ul>
    <li>.angular-tree-component</li>
    <li>.angular-tree-component-rtl</li>
    <li>.tree-node</li>
    <li>.tree-node-wrapper</li>
    <li>.tree-node-expanded</li>
    <li>.tree-node-collapsed</li>
    <li>.tree-node-focused</li>
    <li>.tree-node-active</li>
    <li>.tree-node-level-X</li>
    <li>.tree-node-leaf</li>
    <li>.node-wrapper</li>
    <li>.toggle-children-wrapper</li>
    <li>.toggle-children</li>
    <li>.toggle-children-placeholder</li>
    <li>.node-content-wrapper</li>
    <li>.tree-children</li>
    <li>.tree-node-loading</li>
    <li>.node-drop-slot</li>
    <li>.is-dragging-over</li>
    <li>.is-dragging-over-disabled</li>
</ul>

<h2>Overriding style</h2>
<p>Surround your tree with a class, and add your custom style to your style.scss file.</p>
<p>Scope all the custom rules under your custom class - and that's it!</p>

<h2>Example styles</h2>
<p>These styles were provided by the community. They might be outdated.</p>
<p>If you find an error in these styles please suggest an edit - don't open a github issue.</p>
<p>Thanks</p>


<h3>Branch lines</h3>
<p>This theme puts explorer like branch lines that connect the parents with their children</p>
<div class="lightbox">
    <img src="assets/styling/f50955b-Screen_Shot_2016-11-29_at_12.11.52_PM.png" alt="Branch lines">
</div>
<code-example>{{ branchLines }}</code-example>


<h3>Pull right</h3>
<p>This theme allows placing items in the right side of the tree nodes using <code>pull-right</code> class.</p>
<p>It is based on flexbox, so relevant only to browsers who support it.</p>
<div class="lightbox">
    <img src="assets/styling/28d7625-Screen_Shot_2016-11-29_at_12.11.01_PM.png" alt="Pull right">
</div>
<code-example>{{ pullRight }}</code-example>


<h3>ACE Admin theme</h3>
<p><a href="http://ace.jeka.by/treeview.html" target="_blank">ACE Admin theme</a> style.</p>
<p>Credit to Viet Anh Do for sending this theme!</p>
<div class="lightbox">
    <img src="assets/styling/0bd50e1-treecss.png" alt="ACE Admin theme">
</div>
<code-example>{{ ace }}</code-example>
